<template>
	<view class="cart-container">
		<!-- 未登录状态 -->
		<view v-if="!isLoggedIn" class="not-login">
			<image src="/static/cart.png" mode="aspectFit" class="cart-icon"></image>
			<text class="login-tip">请先登录查看购物车</text>
			<button class="login-btn" @click="goToLogin">立即登录</button>
		</view>
		
		<!-- 已登录状态 - 购物车为空 -->
		<view v-else-if="cartItems.length === 0" class="empty-cart">
			<text class="empty-icon">🛒</text>
			<text class="empty-text">购物车空空如也</text>
			<button class="go-shopping-btn" @click="goToHome">去逛逛</button>
		</view>
		
		<!-- 已登录状态 - 购物车有商品 -->
		<view v-else class="cart-content">
			<view class="cart-item" v-for="(item, index) in cartItems" :key="index">
				<view class="item-info">
					<view class="item-image"></view>
					<view class="item-details">
						<text class="item-title">{{ item.name }}</text>
						<text class="item-price">¥{{ item.price.toFixed(2) }}</text>
						<view class="item-quantity">
							<text class="quantity-btn" @click="decreaseQuantity(index)">-</text>
							<text class="quantity">{{ item.quantity }}</text>
							<text class="quantity-btn" @click="increaseQuantity(index)">+</text>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 底部结算栏 -->
			<view class="checkout-bar">
				<view class="total-price">
					<text>合计：</text>
					<text class="price">¥{{ totalPrice.toFixed(2) }}</text>
				</view>
				<button class="checkout-btn">去结算({{ totalQuantity }})</button>
			</view>
		</view>
	</view>
</template>

<script>
export default {
  data() {
    return {
      isLoggedIn: false,
      cartItems: []
    };
  },
  
  computed: {
    // 计算总价格
    totalPrice() {
      return this.cartItems.reduce((total, item) => total + item.price * item.quantity, 0);
    },
    
    // 计算总数量
    totalQuantity() {
      return this.cartItems.reduce((total, item) => total + item.quantity, 0);
    }
  },
  
  onShow() {
    // 页面显示时检查登录状态
    this.checkLoginStatus();
  },
  
  methods: {
    checkLoginStatus() {
      const loginStatus = uni.getStorageSync('isLoggedIn');
      this.isLoggedIn = !!loginStatus;
      
      if (this.isLoggedIn) {
        // 模拟从本地存储获取购物车数据
        this.loadCartItems();
      } else {
        this.cartItems = [];
      }
    },
    
    loadCartItems() {
      // 模拟购物车数据
      this.cartItems = [
        { name: '时尚连衣裙', price: 199.00, quantity: 1 },
        { name: '运动鞋', price: 299.00, quantity: 1 },
        { name: '智能手表', price: 599.00, quantity: 1 }
      ];
    },
    
    goToLogin() {
      uni.navigateTo({
        url: '/pages/auth/login'
      });
    },
    
    goToHome() {
      uni.switchTab({
        url: '/pages/home/home'
      });
    },
    
    decreaseQuantity(index) {
      if (this.cartItems[index].quantity > 1) {
        this.cartItems[index].quantity--;
      }
    },
    
    increaseQuantity(index) {
      this.cartItems[index].quantity++;
    }
  }
};
</script>

<style>
.cart-container {
	padding: 20rpx;
	background-color: #f8f8f8;
	min-height: 100vh;
}

/* 未登录状态样式 */
.not-login {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 70vh;
}

.cart-icon {
	width: 200rpx;
	height: 200rpx;
	opacity: 0.5;
	margin-bottom: 30rpx;
}

.login-tip {
	font-size: 32rpx;
	color: #666;
	margin-bottom: 40rpx;
}

.login-btn {
	width: 280rpx;
	height: 80rpx;
	background-color: #FF6B6B;
	color: #fff;
	font-size: 28rpx;
	line-height: 80rpx;
	text-align: center;
	border-radius: 40rpx;
}

.login-btn:active {
	opacity: 0.8;
}

/* 空购物车样式 */
.empty-cart {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 70vh;
}

.empty-icon {
	font-size: 120rpx;
	margin-bottom: 30rpx;
}

.empty-text {
	font-size: 32rpx;
	color: #666;
	margin-bottom: 40rpx;
}

.go-shopping-btn {
	width: 280rpx;
	height: 80rpx;
	background-color: #FF6B6B;
	color: #fff;
	font-size: 28rpx;
	line-height: 80rpx;
	text-align: center;
	border-radius: 40rpx;
}

.go-shopping-btn:active {
	opacity: 0.8;
}

/* 购物车内容样式 */
.cart-content {
	background-color: #fff;
	border-radius: 10rpx;
	padding: 20rpx;
	margin-bottom: 100rpx;
}

.cart-item {
	padding: 20rpx 0;
	border-bottom: 1rpx solid #f0f0f0;
}

.cart-item:last-child {
	border-bottom: none;
}

.item-info {
	display: flex;
}

.item-image {
	width: 160rpx;
	height: 160rpx;
	background-color: #f0f0f0;
	border-radius: 8rpx;
	margin-right: 20rpx;
}

.item-details {
	flex: 1;
	position: relative;
}

.item-title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 28rpx;
	color: #333;
	margin-bottom: 10rpx;
}

.item-price {
	font-size: 32rpx;
	color: #FF6B6B;
	font-weight: bold;
	margin-bottom: 20rpx;
	display: block;
}

.item-quantity {
	display: flex;
	align-items: center;
	position: absolute;
	bottom: 0;
	right: 0;
}

.quantity-btn {
	width: 40rpx;
	height: 40rpx;
	background-color: #f0f0f0;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 28rpx;
	color: #333;
}

.quantity {
	margin: 0 20rpx;
	font-size: 28rpx;
}

/* 底部结算栏 */
.checkout-bar {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	height: 90rpx;
	background-color: #fff;
	border-top: 1rpx solid #f0f0f0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 30rpx;
}

.total-price {
	font-size: 28rpx;
	color: #333;
}

.price {
	font-size: 36rpx;
	color: #FF6B6B;
	font-weight: bold;
}

.checkout-btn {
	width: 200rpx;
	height: 70rpx;
	background-color: #FF6B6B;
	color: #fff;
	font-size: 28rpx;
	line-height: 70rpx;
	text-align: center;
	border-radius: 35rpx;
}

.checkout-btn:active {
	opacity: 0.8;
}
</style>